<template>
  <div class="mycalendar">
    <div class="title">{{ $t('dashboard.mytitle') }}</div>
    <div class="time">
      <!-- 年份：在当前年份发的基本上 上下 +5 -->
      <el-select v-model="year" @change="changeData">
        <el-option
          v-for="item in yearArr"
          :key="item"
          :label="item"
          :value="item"
        ></el-option>
      </el-select>
      <el-select v-model="month" @change="changeData">
        <el-option
          v-for="item in 12"
          :key="item"
          :label="item"
          :value="item"
        ></el-option>
      </el-select>
    </div>
    <el-calendar class="calendar" v-model="nowDate">
      <template slot="dateCell" slot-scope="{ date }">
        <span>{{ date | formatData }}</span>
        <span class="xiu" v-if="isweek(date)">休</span>
      </template>
    </el-calendar>
  </div>
</template>

<script>
export default {
  props: {
    // 从外界传入的时间
    localdate: {
      type: Date,
      default: function () {
        return new Date()
      }
    }
  },
  watch: {
    // 侦听传入的时间
    localdate: {
      immediate: true, // 打开页面之后，马上执行 watch
      deep: true, // 尝试侦听
      handler: function (newVal) {
        // 将时间的年月提取出来
        var _date = new Date(newVal)
        // 得到年
        this.year = _date.getFullYear()
        // 得到月
        this.month = _date.getMonth() + 1
        // 得到年份的数组
        this.getYearArr(this.year)
      }
    }
  },
  filters: {
    formatData (value) {
      var _date = new Date(value)
      // 得到时间中的日期
      return _date.getDate()
    }
  },
  data () {
    return {
      // 年份
      year: '',
      // 月份
      month: '',
      // 选中日期
      nowDate: new Date(),
      // 年份的数组
      yearArr: []
    }
  },
  methods: {
    // 让选择框与日历进行联动
    changeData () {
      var _date = new Date()
      // 得到年月
      var _year = _date.getFullYear()
      var _month = _date.getMonth() + 1
      // 重新给 nowDate 赋值
      if (this.year === _year && this.month === _month) {
        // 1.0 本月：显示当前时间
        this.nowDate = new Date()
      } else {
        // 2.0 非本月：默认显示为第一天
        this.nowDate = new Date(`${this.year}/${this.month}/01`)
      }
    },
    // 判断是否显示‘休’字
    isweek (date) {
      var _date = new Date(date)
      // 得到日期的年月
      var _year = _date.getFullYear()
      var _month = _date.getMonth() + 1
      // 判断年月是否相同
      if (this.year === _year && this.month === _month) {
        // 得到当前时间
        var res = _date.getDay()
        // 判断当前年月是否相同
        if (res === 6 || res === 0) {
          return true
        }
      }
    },
    // 得到前后五年的年份数组
    getYearArr (year) {
      // 得到年份的区间
      var _min = year - 5
      var _max = year + 5
      // 生成年份数组
      for (var i = _min; i <= _max; i++) {
        this.yearArr.push(i)
      }
    },
    // 查看日历插槽中的数据
    fn (date, data) {
      console.log(date)
      console.log(data)
    }
  }
}
</script>

<style lang="scss" scoped>
.mycalendar {
  .time {
    text-align: right;
    ::v-deep .el-input__inner {
      width: 100px;
      margin-left: 5px;
      height: 30px;
      line-height: 30px;
    }
    ::v-deep i.el-select__caret.el-input__icon.el-icon-arrow-up {
      line-height: 30px;
    }
  }
  ::v-deep .el-calendar__header {
    display: none;
  }
  .calendar {
    ::v-deep .el-calendar-day {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    ::v-deep .prev,
    ::v-deep .next,
    ::v-deep .current {
      border: none;
    }
    ::v-deep .el-calendar__body thead th {
      font-weight: 700;
    }
    ::v-deep .el-calendar__body thead th:nth-child(6),
    ::v-deep .el-calendar__body thead th:nth-child(7) {
      color: #fa7c4d;
    }
    .xiu {
      display: inline-block;
      width: 20px;
      height: 20px;
      text-align: center;
      line-height: 20px;
      background-color: #fa7c4d;
      color: #fff;
      border-radius: 50%;
      font-size: 12px;
      margin-left: 10px;
    }
    ::v-deep .is-today {
      span {
        width: 25px;
        height: 25px;
        text-align: center;
        line-height: 25px;
        background-color: #409eff;
        color: #fff;
        border-radius: 50%;
      }
    }
  }
}
</style>
